<template>
    <view class="mine-infoitem-page">
        <view class="mine-infoitem-content">
            <up-upload
	          :fileList="fileList"
              @afterRead="afterRead"
              @delete="deletePic"
	          name="image-upload"
              multiple
              :maxCount="3"
              :uploadText="`可上传${3 - fileList.length}张图片`"
	          :previewFullImage="true"
            ></up-upload>
        </view>
        <up-modal :show="showDelImageConfirm" title="确认删除操作" showCancelButton @cancel="cancelDelImage" @confirm="confirmDelImage"></up-modal>
    </view>
</template>

<script setup lang="ts">
import { supplierQuerySupplierInfo } from '@/genapi/supplier'
import { delPhotoInfos } from '@/genapi/_supplier'
const fileList = ref([])
const supplierId = ref('')
const delImageId = ref('')
const delImageIndex = ref(0)
const showDelImageConfirm = ref(false)

onMounted(() => {
    getImagesInfo()
})

async function getImagesInfo() {
    const params = {}
    const { data } = await supplierQuerySupplierInfo(params)
    supplierId.value = data.data.supplierInfo.supplierId
    if (data.data.fileInfos && data.data.fileInfos.length) {
        const arr = []
        data.data.fileInfos.forEach((e) => {
            Object.assign(e, { url: e.fileUrl })
            arr.push(e)
        })
        if (arr.length > 3) arr.length = 3
        fileList.value = arr
    }
}

function deletePic(res) {
    showDelImageConfirm.value = true
    delImageId.value = res.file.id
    delImageIndex.value = res.index
}

async function confirmDelImage() {
    showDelImageConfirm.value = false
    const params = {
        ids: [delImageId.value]
    }
    const { data } = await delPhotoInfos(params)
    if (data.code === 200) {
        uni.showToast({
            title: '删除成功',
            icon: 'success'
        })
        fileList.value.splice(delImageIndex.value, 1)
        getImagesInfo()
    }
}

function cancelDelImage() {
    showDelImageConfirm.value = false
    delImageId.value = ''
    delImageIndex.value = 0
}

async function afterRead(event) {
    let lists = [].concat(event.file)
    lists.map((item) => {
      fileList.value.push({
        ...item,
        status: 'uploading',
        message: '上传中',
      })
    })
    await Promise.all(
        lists.map((e) => {
            return new Promise(async (resolve, reject) => {
                await uploadFilePromise(e.url)
                resolve()
            })
        })
    ).then(() => {
        getImagesInfo()
    })
}

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: `${import.meta.env.VITE_BASE_API_URL}/api/supplier/upload`,
      filePath: url,
      name: 'files',
      header: {
        Authorization: 'Bearer ' + uni.getStorageSync('token')
      },
      formData: {
        supplierId: supplierId.value
      },
      success: (res) => {
        resolve(res.data)
      },
    })
  })
}
</script>

<style scoped>
.mine-infoitem-page {
    padding: 0 24rpx;
}
.mine-infoitem-content {
    margin-top: 24rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 16rpx;
}
</style>
